<div class="container">
    <div class="row clearfix">
        <div class="col-md-5 column">
            <!--左边树结构-->

            <div id="toolbar1" class="btn-group">
                <!--button id='btn_treeview_refresh' class='btn btn-default'>
                		<span class='glyphicon glyphicon-refresh' aira-hidden='true'></span>刷新</button-->
                <!--button id="btn_add" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button-->
            </div><br/>

            <div id="treeview" class="pre-scrollable" style="height: 800px"></div>



        </div>
        <!--列分隔-->
        <div class="col-md-7 column">
            <!--右边表格-->
            <!--p><button id="btn_table" class="btn btn-default">Refresh from url:/api/v1/fj?pid=17</button></p-->

            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                <button id="btn_edit" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                    </button>
                <button id="btn_delete" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                    </button>
            </div>
            <!--table id="table" data-use-row-attr-func="true" data-reorderable-rows="true"-->
            <table id="table">
                <!--上面的是可以拖动行排序的二个选项-->
                <!-->
                <table id="table" class="table table-hover">
                    <-->
                        <!--thead>
                <tr>
                    <th data-field="Sort">排序值</th>
                    <th data-field="Id">ID</th>
                    <th data-field="Name">名称</th>
                    <th data-field="Remark">说明</th>
                </tr>
                </thead-->
                </table>
        </div>

    </div>
    <!--div class="row clearfix" END -->
</div>

<script>
    var $table = $('#table'),
        $remove = $('#remove');
    var $treeview = $('#treeview');

    function get_table_fj_data(pid) {
        //根据pid取得房间  ，表格用URL取数据
        $table.bootstrapTable('refresh', {
            url: '/api/v1/fj?pid=' + pid
        });
    };

    function clear_table_data() {
        //清除表格内容
        $table.bootstrapTable('load', []);
    }

    $('#btn_table').click(function() {
        $table.bootstrapTable('refresh', {
            url: '/api/v1/fj?pid=17'
        });
    });

    $('#btn_treeview_refresh').click(function() {
        //treeview树重新刷新，重新刷新后不能响应选中和取消选中事件了
        $treeview.treeview({
            data: getTree()
        });;
    });

    $remove.click(function() {
        var ids = getIdSelections();
        $table.bootstrapTable('remove', {
            field: 'id',
            values: ids
        });
        $remove.prop('disabled', true);
    });

    function operateFormatter(value, row, index) {
        return [
            '<a class="edit" href="javascript:void(0)" title="修改">',
            '<i class="glyphicon glyphicon-pencil"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="删除">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
    window.operateEvents = {
        'click .edit': function(e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row));
        },
        'click .remove': function(e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'Id',
                values: [row.Id]
            });
        }
    };

    function initTable() {
        $table.bootstrapTable({
            //url: '/api/v1/fj',
            method: 'get', //请求方式（*）
            treeShowField: 'Name', //树形表的显示内容用哪个字段
            toolbar: '#toolbar', //工具按钮用哪个容器
            clickToSelect: true, //是否启用点击选中行
            striped: true, //是否显示行间隔色
            showRefresh: true, //是否显示刷新按钮
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            //showToggle: true, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式

            //sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            //使用服务器分页后，没有数据显示了
            //queryParams: oTableInit.queryParams,//传递分页查询参数（*）
            //使用此选项后，没有数据显示了

            /*pagination: true, //是否显示分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 100, //每页的记录行数（*）
            pageList: [10, 25, 50, 100, 200], //可供选择的每页的行数（*）
			*/
            columns: [{
                checkbox: true
            }, {
                field: 'sort',
                title: '排序',
                editable: {
                    type: 'text',
                    title: '修改排序号',
                    validate: function (v) {
                        if (!v) return '排序号不能为空，且只能是数字';
                    }
                },
                sortable: true,
                align: 'center',
                valign: 'middle',
				/*formatter: function (value, row, index) {
                    return "<a href=\"#\" class='table_sort' name=\"sort\" data-type=\"text\" data-pk=\""+row.id+"\" data-title=\"排序号\">" + value + "</a>";
                }*/
            }, {
                field: 'text',
                title: '名称',
				editable: {
                    type: 'text',
                    title: '修改名称',
                    validate: function(value) {
                        value = $.trim(value);
                        if (!value) {
                            return 'This field is required';
                        }
                        if (!/^\$/.test(value)) {
                            return 'This field needs to start width $.'
                        }
                        var data = $table.bootstrapTable('getData'),
                            index = $(this).parents('tr').data('index');
                        console.log(data[index]);
                        return '';
                    }
                },
                align: 'center',
                valign: 'middle',
				/*formatter: function (value, row, index) {
                    return "<a href=\"#\" class='table_name' name=\"name\" data-type=\"text\" data-pk=\""+row.id+"\" data-title=\"名称\">" + value + "</a>";
                },*/
            }, {
                field: 'remark',
                title: '说明',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'operate',
                title: '操作',
                align: 'center',
                events: operateEvents,
                formatter: operateFormatter
            }],
            data: [{
                "id": 0,
                "text": "",
                "remark": ""
            }],
            onClickRow: function (row, $element) {
                curRow = row;
            },
			onLoadSuccess: function (aa, bb, cc) {
                /*x-editable组件，不使用，使用table的组件，封装了它
				$("a.table_sort").editable({
                    url: function (params) {
                        var sName = $(this).attr("name");
                        curRow[sName] = params.value;
                        $.ajax({
                            type: 'POST',
                            url: "/Editable/Edit",
                            data: curRow,
                            dataType: 'JSON',
                            success: function (data, textStatus, jqXHR) {
                                alert('保存成功！');
                            },
                            error: function () { alert("error");}
                        });
                    },
                    type: 'text'
                });
				$("a.table_name").editable({
					url: function(params){
						var sName = $(this).attr("name");
                        curRow[sName] = params.value;
                        $.ajax({
                            type: 'POST',
                            url: "/Editable/Edit",
                            data: curRow,
                            dataType: 'JSON',
                            success: function (data, textStatus, jqXHR) {
                                alert('保存成功！');
                            },
                            error: function () { alert("error");}
                        });
					},
					type:'text'
				});
				*/
            },
        });
    };

    function getTree() {
        //取得数据后给treeview数据
        var retu;
        $.ajax({
            type: 'GET',
            dataType: 'json',
            async: false,
            url: '/api/v1/ly',
            data: {
                id: "0",
                data: "",
            },
            success: function(ajax_data) {
                    retu = eval(ajax_data);
                    console.log("返回数据：")
                    console.log(retu)
                } //success
        }); //$.ajax
        return [retu];
    };

    $(function() {
        initTable(); //初始化表格
        $('#treeview').treeview({
            collapsed: false,
            data: getTree(), // data is not optional
            //levels: 5,
            color: "#428bca",
        });

        //$treeview.treeview({data: getTree()});	//生成树

        $treeview.on('nodeSelected', function(event, data) {
            // treeview的节点被选中事件代码...
            //被选中后，TABLE表格根据选中的栏的ID号取得房间数据
            get_table_fj_data(data.id);
        });

        $treeview.on('nodeUnselected', function(event, data) {
            // treeview的节点被取消选中事件代码...
            clear_table_data()
        });
    });
</script>